import { Card,Tabs, Empty,Modal,Button,Divider} from 'antd'
import React, {useEffect, useState} from 'react'
import './NotifyPortal.less'
import moment from 'moment'
import {getNotice} from "@/pages/Workplace/service";
import { FileTextOutlined } from '@ant-design/icons';

const { TabPane } = Tabs;

const tabList = [
  { title: '系统公告', key: 1 },
  { title: '公司公告', key: 2 }
  ];

const MessagePortal = ({ loading }) => {

  const [messageList, setMessageList] = useState([]);
  const [visible,setVisible] = useState(false);
  const [data,setData] = useState({});

  useEffect(() => {
    getNotice(1).then(res =>{
      setMessageList(res ? res.list : []);
    })
  }, []);

  const tabOnChange = (key) => {
    getNotice(parseInt(key)).then(res =>{
      setMessageList(res ? res.list : []);
    })
  };

  const queryNotify = (item) => {
    setVisible(true);
    setData(item);
  };

  const onCancel = () => {
    setVisible(false);
    setData({});
  };

  return (
    <Card
      loading={loading}
      bordered={false}
      bodyStyle={{
        padding: 0,
      }}
      style={{height: '100%'}}
    >
      <div className="notify-portal">
        <Tabs
          animated={false}
          size="large"
          onChange={(activeKey) => tabOnChange(activeKey)}
          tabBarStyle={{
            marginBottom: 24,
          }}
        >
          {
            tabList.map((tab) => {
              return <TabPane tab={tab.title} key={tab.key}>
                <div className="notify-portal__list">
                  {
                    messageList.length < 1 ?
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
                      messageList.map((item,index) => {
                        return <div className="message-portal__list-item" key={index} onClick={() => queryNotify(item)}>
                          <div className="message-portal__list-item-title">{item.title}</div>
                          <div className="message-portal__list-item-time">{moment(item.todoDate).format('YYYY-MM-DD')}</div>
                        </div>
                      })
                  }
                </div>
              </TabPane>
            })
          }
        </Tabs>
      </div>
      <Modal
        width={'48%'}
        destroyOnClose
        closable={false}
        title={data.title}
        visible={visible}
        footer={[<Button key="back" type="primary" onClick={() => onCancel()}>关闭</Button>]}>
        <p>&emsp;&emsp;{data.content}</p>
        {
          (data.fileUrlList && data.fileUrlList.length > 0) && <>
            <Divider orientation="left" plain dashed>附件内容</Divider>
            <div style={{textAlign: 'left', marginBottom: '6px'}}>
              {
                data.fileUrlList.map((item, index) => {
                  return <p key={index}><FileTextOutlined style={{color: '#68b377', marginRight: '4px'}}/><a
                    onClick={() => window.open(item)}>{item.split('----')[1]}</a></p>
                })
              }
            </div>
          </>
        }
      </Modal>
    </Card>
  )
};

export default MessagePortal
